<template>
	<div>
		<img :src="'/static/image/lang/' + currlang + '.jpg'" class="icon">
		<el-select v-model="currlang" placeholder="请选择语言" class="lang" @change="chooseLang">
			<el-option
			v-for="item in lang"
			:key="item.value"
			:label="'           ' + item.label"
			:value="item.value">
			<!-- <img :src="item.flag" class="flag" style="height: 15px; margin: 9px 15px 0 0; float: left"> -->
			<svg class="icon svg-icon" style="width: 21px; height: 15px; float: left; margin: 10px 15px 0 0; border:solid 1px #f0f0f0; overflow: hidden" aria-hidden="true">
				<use :xlink:href="'#icon-' + item.flag"></use>
			</svg>
			<span style="float: left">{{ item.label }}</span>
			</el-option>
		</el-select>
	</div>
</template>

<script>
import {LANG} from '@/config/const.js'
export default {
	inject: ['reload'],
	data() {
		return {
			lang: LANG,
			currlang: 'zh'
		};
	},
	created: function() {
		/*获取当前语言*/
		let lang = this.$localstorage.get('lang');
		this.currlang = lang?lang:'zh'
	},
	methods: {
		/*设置选择的语言*/
		chooseLang: function(v){
			// console.log(v)
			this.$localstorage.set('lang', v);
			this.reload();
		}
	}
};
</script>

<style lang="stylus" scoped>
.icon{
	width: 22px
	position: fixed
	z-index: 999
	top: 18px
	left: 250px
}
.lang
	width: 120px
	position: fixed
	z-index: 999
	top: 10px
	left: 230px
	/deep/ .el-input__inner
		border: none !important
		background: transparent
		color: #fff
		/deep/ .flag
			border: red 10px solid !important
			height: 100px !important
</style>